<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加轮播图 - 管理后台</title>
    <link rel="stylesheet" href="/static/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<div class="layui-col-md12">
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input name="name" value="" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <input type="hidden" name="banner" value="" id="image">
                <button type="button" class="layui-btn" id="uploadBtn">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <div class="layui-form-mid layui-word-aux">建议尺寸：750px*450px</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input name="sort" value="99" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接文章</label>
            <div class="layui-input-inline">
                <select name="article_id" lay-search id="article">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">&nbsp;</label>
            <button class="layui-btn" lay-submit="" lay-filter="demo1">确定提交</button>
        </div>
    </form>
</div>
<script src="/static/layui.js"></script>
<script>
    layui.use(['element','jquery','layer','upload','form'], function(){
        var element = layui.element,$ = layui.$,layer = layui.layer,form = layui.form,upload = layui.upload;
        $.get('{:url("article/allLists")}',function(data){
            var html = '<option value="">请选择选择</option>';
            $(data.data).each(function(i,e){
                html += '<option value="'+e.article_id+'">'+e.title+'</option>'
            });
            $('#article').html(html);
            form.render('select');
        },'json');
        form.on('submit(demo1)', function(data){
            var index = layer.load(1);
            $.post('{:url("system/addBanner")}',data.field,function (data) {
                if(data.code == 0){
                    layer.close(index);
                    layer.msg(data.msg,{
                        time: 3000,
                        icon:1
                    }, function(){
                        layer.closeAll("iframe");
                        parent.location.reload();
                    });
                }else{
                    layer.close(index);
                    layer.msg(data.msg,{icon:5,shift:6});
                }
            });
            return false;
        });
        $('.childrenBody').on('click','img',function(){
            var img = new Array;
            img.push({src:$(this).attr('src')});
            layer.photos({
                photos: {data:img},
                anim: 5
            });
        });
        upload.render({
            elem: '#uploadBtn',
            field: 'image',
            accept:'images',
            acceptMime :'images',
            url: '{:url("system/upload")}',
            before: function(){
                layer.load();
            },
            done: function (res) {
                layer.closeAll('loading');
                if (res.code == 0) {
                    $('#image').prev('img').remove();
                    $('#image').before('<img src="/'+ res.data+'" style="height:38px;">');
                    $('#image').val(res.data);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function(){
                layer.closeAll('loading');
                layer.msg('上传失败',{icon:5,shift:6});
            }
        });
    });
</script>
</body>
</html>